<template>
<div class="app-container">
<h2 style="text-align: center;">发布新课程</h2>
<el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
<el-step title="填写课程基本信息"/>
<el-step title="创建课程大纲"/>
<el-step title="提交审核"/>
</el-steps>

<el-form label-width="120px">
    <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频"/>
    </el-form-item>
    <!-- 所属分类 TODO -->
    <el-form-item label="课程分类">
     <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="oneLevelTwoSubject">
     <el-option v-for="oneSubject in subjectOneList" :key="oneSubject.id" 
     :label="oneSubject.title" :value="oneSubject.id" />
     </el-select>

     <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
     <el-option v-for="twoSubject in subjectTwoList" :key="twoSubject.id" 
     :label="twoSubject.title" :value="twoSubject.id"/>
     </el-select>
   </el-form-item>
<!-- 课程讲师 -->
   <el-form-item label="课程讲师">
   <el-select v-model="courseInfo.teacherId" placeholder="请选择">
   <el-option v-for="teacher in teacherList" :key="teacher.id" :label="teacher.name" :value="teacher.id"/>
   </el-select>
   </el-form-item>


    <el-form-item label="总课时">
       <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right"/>
    </el-form-item>
   
    <!-- 课程简介-->
   <el-form-item label="课程简介">
       <tinymce :height="300" v-model="courseInfo.description"/>
   </el-form-item>
    <!-- 课程封面-->
    <el-form-item label="课程封面">
      <el-upload :show-file-list="false" :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload" :action="BASE_API+'/eduoss/fileoss/uploadFile'"
       class="avatar-uploader">
       <img :src="courseInfo.cover" style="width: 200px;height: 150px"/>
      </el-upload>  
    </el-form-item>

    <el-form-item label="课程价格">
         <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder=""/>元
    </el-form-item>
    <el-form-item>
     <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
    </el-form-item>
</el-form>
</div>
</template>
<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'
export default {
   components: { Tinymce },
   data() {
      return {
         courseInfo: {
           title: '',
           subjectId:'',
           subjectParentId: '',
           teacherId: '',
           description: '',
           cover: '',
           lessonNum: 0,
           price: 0
         },
         courseId: '',
         BASE_API: process.env.BASE_API,
         teacherList: [],
         subjectOneList:[],
         subjectTwoList:[],
         saveBtnDisabled: false // 保存按钮是否禁用
      }
   },
   created() {
      this.init()
   },
   watch: {
      $route(to, from) {
         this.init()
      }
   },
   methods: {
      handleAvatarSuccess(res,file){
       this.courseInfo.cover = res.data.url
      },
      beforeAvatarUpload(file){
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
         this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!')
         }
        return isJPG && isLt2M
      },
     next() {
        this.saveBtnDisabled=true
        if(this.courseId === ''){
         this.saveData()
        }else{
         this.updateData()
        }
     },
     updateData(){
        course.updateCourseInfo(this.courseInfo)
        .then(response=>{
            this.$router.push({path: '/course/chapter/'+this.courseId})
        })
     },
     getInfo(){
          course.getCourseInfo(this.courseId)
           .then(response=>{
               this.courseInfo=response.data.courseInfo;  
               // 初始化分类列表
            subject.getAllSubject().then(response => {
                 this.subjectOneList = response.data.list
                 for (let i = 0; i < this.subjectOneList.length; i++) {
                   if (this.subjectOneList[i].id === this.courseInfo.subjectParentId) {
                     this.subjectTwoList = this.subjectOneList[i].children
                   }
                 }
             })
               //初始化所有讲师
               this.getListTeacher()
          })
     },
     init() {
        if(this.$route.params && this.$route.params.id) {
            this.courseId = this.$route.params.id
            //调用根据id查询课程的方法
            this.getInfo()

        } else {
            //初始化所有讲师
            this.getListTeacher()
            //初始化一级分类
            this.getOneSubject()
        }          
      },
     saveData(){
       course.addCourseInfo(this.courseInfo)
       .then(response=>{
         this.$message({
            type: 'success',
            message: '保存成功！'
         });
         this.courseId=response.data.courseId;
         this.$router.push({path: '/course/chapter/'+this.courseId})
       })
       .catch(err=>{
         this.$message({
            type: 'error',
            message: '保存失败！'
         })
       })
     },
     getListTeacher(){
      course.getListTeacher()
      .then(response=>{
       this.teacherList=response.data.items;
      })
      .catch(err=>{
         this.$message({
            type: 'error',
            message: '获取列表失败！'
         })
      })
     },
     getOneSubject(){
           subject.getAllSubject()
           .then(response=>{
            this.subjectOneList=response.data.list;
           })
           .catch(err=>{
            this.$message({
               type: 'error',
               message: '获取列表失败！'
            })
           })
     },
     oneLevelTwoSubject(value){
      for(var i=0;i<this.subjectOneList.length;i++){
         if(value === this.subjectOneList[i].id){
            this.subjectTwoList=this.subjectOneList[i].children;
            this.courseInfo.subjectId = ''
         }
      }
     }
   }
}
</script>
<style scoped>
  .tinymce-container {
      line-height: 29px;
   }
</style>